<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Happy ERP</title>
    <%= stylesheet_link_tag "../javascripts/ext/resources/css/ext-all.css" %>

    <%= stylesheet_link_tag "images" %>
    <%= stylesheet_link_tag "ext-patch" %>

    <%= javascript_include_tag "ext/ext-all.js" %>


    <script type="text/javascript">

      Ext.require([
        'Ext.form.*',
        'Ext.layout.container.Column',
        'Ext.window.Window',
        'Ext.window.MessageBox',
        'Ext.panel.Panel'
      ]);

      Ext.onReady(function(){
        Ext.QuickTips.init();

        //左边的菜单栏
        var accordition = Ext.create('Ext.form.Panel', {
          region:'west',
          margins:'5 0 5 5',
          split:true,
          width: 160,
          collapseMode: 'mini',
          layout:'accordion'
        });

        var loginImg1 = Ext.create('Ext.panel.Panel', {
          width: 420,
          region: 'center',
          //bodyStyle: Ext.isIE ? 'padding:15px 0 5px 15px;' : 'padding:10px 15px;',
          html: '<img src = "/images/welcome2.jpg" width="420" height="276"/>'

        });

        Ext.create('Ext.Viewport', {
          layout: {
            type: 'border',
            padding: 5
          },
          defaults: {
            split: true
          },
          items: [accordition,loginImg1]})

        var store1 = Ext.create('Ext.data.TreeStore', {
          root: {
            expanded: true,
            text:"",
            user:"",
            status:"",
            children: [
              { text:"detention", leaf: true },
              { text:"homework", expanded: true,
                children: [
                  { text:"book report", leaf: true },
                  { text:"alegrbra", leaf: true}
                ]
              },
              { text: "buy lottery tickets", leaf:true }
            ]
          }
        });

        var node1 = Ext.create('Ext.tree.Panel', {
          title: 'Simple Tree',
          width: 200,
          height: 150,
          store: store1,
          rootVisible: false//,
          //renderTo: Ext.getBody()
        });

        var store2 = Ext.create('Ext.data.TreeStore', {
          root: {
            expanded: true,
            text:"",
            user:"",
            status:"",
            children: [
              { text:"detention", leaf: true },
              { text:"homework", expanded: true,
                children: [
                  { text:"book report", leaf: true },
                  { text:"alegrbra", leaf: true}
                ]
              },
              { text: "buy lottery tickets", leaf:true }
            ]
          }
        });

        var node2 = Ext.create('Ext.tree.Panel', {
          title: 'Simple Tree',
          width: 200,
          height: 150,
          store: store2,
          rootVisible: false//,
          //renderTo: Ext.getBody()
        });

        accordition.add(node1,node2,{html:'hello world111111111111'});

      }
    )
    </script>
  </head>
  <body>
    <div id="test"></div>
  </body>
</html>
